/**
 * 获取localStorage数据
 */
let goodsId = parseInt(localStorage.goodsId);
let goodsList = JSON.parse(localStorage.goodsList);

/**
 * 放大镜实现
 */
class Magnify{
    constructor(){
        this.init();
    }
    init(){
        this.moveX = null;
        this.moveY = null;
        this.moveBox = document.querySelector(".smallBox");
        this.moveBoxWidth = parseInt(getComputedStyle(this.moveBox)["width"]);
        this.moveBoxHeight = parseInt(getComputedStyle(this.moveBox)["height"]);
        console.log(this.moveBoxWidth)
        this.smallBox = document.querySelector(".bigImg");
        this.bigImg = document.querySelector(".magnify img");
        this.bigWidth = parseInt(getComputedStyle(this.bigImg)["width"]);
        this.bigHeight = parseInt(getComputedStyle(this.bigImg)["height"]);
        this.bigBox = document.querySelector(".magnify");
        this.bindEvent();
    }
    bindEvent(){
        this.smallBox.addEventListener("mouseover",this.moveStart.bind(this));
        this.smallBox.addEventListener("mousemove",this.move.bind(this));
        this.smallBox.addEventListener("mouseout",this.moveEnd.bind(this));
    }
    moveStart(){
        this.moveBox.style.display = "block";
        this.bigBox.style.display = "block";
    }
    move(event){
        let e = event||window.event;
        let scrollHeight = document.body.scrollTop||document.documentElement.scrollTop;
        this.moveX = e.clientX;
        this.moveY = e.clientY;
        this.moveBox.style.top = this.moveY - this.moveBoxHeight- this.moveBox.offsetHeight/2 + 50 + scrollHeight + "px" ;
        this.moveBox.style.left = this.moveX - this.moveBoxWidth- this.moveBox.offsetWidth/2 + "px" ;


        this.moveBox.style.top = this.moveBox.offsetTop <= 0? 0 :this.moveBox.offsetTop;
        this.moveBox.style.left = this.moveBox.offsetLeft <= 0? 0 :this.moveBox.offsetLeft;
        this.moveBox.style.left = this.moveBox.offsetLeft >= 600 - this.moveBoxWidth? 400 +'px' :this.moveBox.offsetLeft;
        this.moveBox.style.top = this.moveBox.offsetTop >= 600 - this.moveBoxHeight? 400 +'px' :this.moveBox.offsetTop;

        
        this.bigImg.style.top = -parseInt(800/799)*this.moveBox.offsetTop + "px";
        this.bigImg.style.left = -parseInt(800/600)*this.moveBox.offsetLeft + "px";
    }
    moveEnd(){
        document.removeEventListener("mousemove",this.move.bind(this));
        this.moveBox.style.display = "none";
            this.bigBox.style.display = "none";
    }
}

/**
 * 根据localStorage中的goodsId加载不同商品数据
 */
renderGoods(goodsList)
function renderGoods(res){
    let goods = res[goodsId],
        detail = $('.detail'),
        html = `<div class="goodsShow">
                    <div class="smallImg">
                    </div>
                    <div class="bigImg">
                        <img src="${goods.imgUrl}">
                        <div class="smallBox"></div>
                    </div>
                    <div class="magnify">
                        <img src="${goods.imgUrl}">
                    </div>
                </div>
                <div class="goodsBuy">
                    <div class="title">
                        <h1>${goods.title}</h1>
                        <p>
                            <i></i><span class="score">(4.9)</span><span class="styleNum">款号：11928852R</span>
                        </p>
                    </div>
                    <div class="saleImg"><img src="http://image03.anta.cn/images/2017/1106/onsale_m01.png"></div>
                    <div class="salePrice">￥<span>${parseInt(goods.price).toFixed(2)}</span></div>
                    <div class="priceList">
                        <p>吊牌价：469.00</p>
                        <span>折扣：83% (折让:￥80)</span>
                        <img src="http://image03.anta.cn/images/2017/coupons/coupons-btn-pc.png" alt="领取优惠券">
                    </div>
                    <div class="saleActivity">
                        <p> 儿童节满269减20/满369减30/满469减50/满799减100&gt;&gt; </p>
                        <p> 鞋服全场包邮&gt;&gt; </p>
                    </div>
                    <div class="colorBox">
                        <p>颜色：</p>
                    </div>
                    <div class="sizeBox">
                        <p>尺码：</p>
                    </div>
                    <div class="sumBox">
                        <div class="amount">
                            <p>数量：</p>
                            <span>1</span>
                        </div>
                        <div class="amountBox">
                            <div>1</div>
                            <div>2</div>
                            <div>3</div>
                            <div>4</div>
                            <div>5</div>
                        </div>
                        <div class="addCart">加入购物车</div>
                        <div class="buyNow">立即购买</div>
                    </div>    
                    <div class="goodsIntro">
                        <h3>商品说明：</h3>
                        <p> 系列：生活系列 <br> 底料：成型EVA/橡胶 面料：合成革/织物 </p>
                    </div>
                </div>`;
    
    $(detail).html(html)
    new Magnify();
}
/**
 * 数量框下拉,并获取下拉框的值
 */
let amount = $(".amount"),
    selectNum = $(".amountBox").children();
$(amount).click(function(){
    $(".amountBox").toggle()
})
$(selectNum).click(function(){
    let goodsNum = parseInt($(this).html());
    $(".amount span").html(goodsNum);
    $(".amountBox").hide();
})
/**
 * 购物车开工 ，此页在  “加入购物车”  处实现部分功能
 */
+function(){
        $(".addCart").click(function(){
            let goodsNum = parseInt($(".amount span").html());
            handleCart(goodsNum)
            $(".sliderBar").animate({
                right:0
            });
            addCart(goodsNum,goodsId)
            cartShow();
        })
}()

function handleCart(goodsNum){
    let cartList = typeof localStorage.cartList =='undefined'?[]:JSON.parse(localStorage.cartList);

    $(goodsList).each(function(index,item){

        if(item.goodsId == goodsId){

            let goodsObj = {
                "goodsId":goodsId,
                "imgUrl":`${goodsList[index].imgUrl}`,
                "title":`${goodsList[index].title}`,
                "price":`${goodsList[index].price}`,
                "goodsNum":goodsNum
            }
            let flag = true;

            if(cartList.length == 0){
                cartList.push(goodsObj);
            }else{
                $(cartList).each(function(i,ele){
                    if(ele.goodsId == goodsId){
                        ele.goodsNum += goodsNum;
                        flag = false;
                    }
                })
                if(flag){
                    cartList.push(goodsObj);
                }
            }
        }

    })
    localStorage.cartList = JSON.stringify(cartList);
    // console.log(JSON.parse(localStorage.cartList))
}